<template>
	<view>
		<view class="page"></view>
		<view :style="{height:$store.state.StatusBar.statusBar + 'px'}">
		</view>
		<view style="width:100vw; height:60rpx; position: relative; padding-left:20rpx;">
			<image class="img" mode="aspectFill" style="width:42rpx; height:50rpx; position:absolute; right:100rpx;" @tap="to('/pages/m-pages/m-articleList/index?type=1')" src="./img/src_resource_image_profile_message.png"></image>
			<image class="img" mode="aspectFill" style="width:50rpx; height:50rpx; position:absolute; right:30rpx;" @tap="handleRouter('/pages/m-pages/m-settle/index')" src="./img/src_resource_image_profile_setting.png"></image>
		</view>
		<view class="z_index2 flex_r fa_c top" @click="to('/pages/m-pages/m-user-info/index?my=1&&userid='+info.id)">
			<view class="top-img">
				<image class="img" :src="info.pic" mode="aspectFill"></image>
			</view>
			<view class="flex1 flex_r fa_c top-infr">
				<view class="flex1">
					<view class="flex_r fa_c top-infr-name">
						<view class="" style="color: #fff; font-weight: 600;">
							{{info.nick}}
						</view>
						<view class="top-infr-icon">
							<!-- 男 -->
							<image class="img" src="./img/ic_boy.png" mode="aspectFill"></image>
							<!-- 女 -->
							<!-- <image class="img" src="./img/ic_girl.png" mode="aspectFill"></image> -->
						</view>
					</view>
					<view class="color__ text_26" style="color: #A6A6A7; margin-top: 10rpx;">
						ID:{{info.tengxuncode}}
					</view>
				</view>
				<view class="top-infr-icon" >
					<image class="img"
						src=""
						mode="aspectFill"></image>
				</view>
			</view>
		</view>


		<view class="flex_r fa_c z_index2 text_22 member" @tap="to('/pages/m-pages/m-vip/index')">
			<view class="flex_r fa_c flex1 z_index2">
				<view class="member-img">
					<image class="img" src="./img/ic_mine_vip.png" mode="aspectFill"></image>
				</view>
				<view v-if="info.vipMap.isVip" class="" style="color: #fafafa;">
					您已开通会vip,将于{{info.vipMap.vipEndDate}}过期
				</view>
				<view v-else class="" style="color: #D0BC8A;">
					开通会员
				</view>
			</view>
			<view class="icon_ z_index2">
				<view class="" style="color: #c19c73;" v-if="info.vipMap.isVip">
					立即续费
				</view>
				<view class="" style="color: #c19c73;" v-else>
					立即开通
				</view>
				<view class="member-icon" >
					<image class="img" src="./img/ic_mine_arrow.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

<!-- 		<view class="z_index2 fun">
			<view class="flex_r fun-box"> -->
<!-- 				<view class="flex_c_c fun-item" @click="open">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_sign.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						每日签到
					</view>
				</view> -->
<!-- 				<view class="" @click="to('/pages/m-pages/m-balance/index')" style="display: flex; width: 100%; justify-content: space-between; align-items: center;">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 44rpx; height: 44rpx;" src="/static/icon/wallet.png" mode=""></image>
						<view class="text_22 color__ fun-item-title" style="color: #fff; margin-left: 20rpx;">
							我的钱包
						</view>
					</view>
					<image style="width: 38rpx; height: 38rpx;" src="/static/icon/righta.png" mode=""></image>
				</view>
				<view class="" style="height: 2rpx; background-color: #333; width: 100%;">
					
				</view> -->
		<!-- 		<view class="flex_c_c fun-item" v-for="(item,index) in funList1" :key="index">
					<view class="fun-item-img">
						<image class="img" :src="item.icon" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						{{item.name}}
					</view>
				</view> -->
	<!-- 		</view>
		</view> -->

		<view class="z_index2 fun">
<!-- 			<view class="fun-title" style="color: #fff; font-weight: 600;">
				常用功能
			</view> -->
			<view class="flex_r fun-box">
				<!-- <view class="" @click="to('/pages/m-pages/m-balance/index')" style="display: flex; width: 100%; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 44rpx; height: 44rpx;" src="/static/icon/wallet.png" mode=""></image>
						<view class="text_22 color__ fun-item-title" style="color: #fff; margin-left: 20rpx;">
							我的钱包
						</view>
					</view>
					<image style="width: 38rpx; height: 38rpx;" src="/static/icon/righta.png" mode=""></image>
				</view> -->
				<!-- <view class="" style="height: 2rpx; background-color: #333; width: 100%; margin: 30rpx 0;"></view> -->
					
				
				<view class="" @tap="handleRouter('/pages/m-pages/m-real/index')" style="display: flex; width: 100%; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 44rpx; height: 44rpx;" src="/static/icon/real.png" mode=""></image>
						<view class="text_22 color__ fun-item-title" style="color: #fff; margin-left: 20rpx;">
							实名认证
						</view>
					</view>
					<image style="width: 38rpx; height: 38rpx;" src="/static/icon/righta.png" mode=""></image>
				</view>
				<view class="" style="height: 2rpx; background-color: #333; width: 100%; margin: 30rpx 0;">
					
				</view>
			<!-- 	<view class="" @tap="handleRouter('/pages/m-pages/m-vip/index')" style="display: flex; width: 100%; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 44rpx; height: 44rpx;" src="/static/icon/vip.png" mode=""></image>
						<view class="text_22 color__ fun-item-title" style="color: #fff; margin-left: 20rpx;">
							会员中心
						</view>
					</view>
					<image style="width: 38rpx; height: 38rpx;" src="/static/icon/righta.png" mode=""></image>
				</view>
				<view class="" style="height: 2rpx; background-color: #333; width: 100%; margin: 30rpx 0;">
					
				</view> -->
	<!-- 			<view class="" @tap="handleRouter('/pages/m-pages/m-visitor/index')" style="display: flex; width: 100%; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 44rpx; height: 44rpx;" src="/static/icon/me.png" mode=""></image>
						<view class="text_22 color__ fun-item-title" style="color: #fff; margin-left: 20rpx;">
							谁看过我
						</view>
					</view>
					<image style="width: 38rpx; height: 38rpx;" src="/static/icon/righta.png" mode=""></image>
				</view> -->
			<!-- 	<view class="" style="height: 2rpx; background-color: #333; width: 100%; margin: 30rpx 0;">
					
				</view> -->
			<!-- 	<view class="" @tap="handleRouter('/pages/m-pages/m-login/agreement')" style="display: flex; width: 100%; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 44rpx; height: 44rpx;" src="/static/icon/xy.png" mode=""></image>
						<view class="text_22 color__ fun-item-title" style="color: #fff; margin-left: 20rpx;">
							协议
						</view>
					</view>
					<image style="width: 38rpx; height: 38rpx;" src="/static/icon/righta.png" mode=""></image>
				</view> -->
			<!-- 	<view class="" style="height: 2rpx; background-color: #333; width: 100%; margin: 30rpx 0;">
					
				</view> -->
				<view class="" @tap="kefu" style="display: flex; width: 100%; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 44rpx; height: 44rpx;" src="/static/icon/kf.png" mode=""></image>
						<view class="text_22 color__ fun-item-title" style="color: #fff; margin-left: 20rpx;">
							在线客服
						</view>
					</view>
					<image style="width: 38rpx; height: 38rpx;" src="/static/icon/righta.png" mode=""></image>
				</view>
				<view class="" style="height: 2rpx; background-color: #333; width: 100%; margin: 30rpx 0;">
					
				</view>
<!-- 				<view class="" @tap="handleRouter('/pages/m-pages/m-settle/index')" style="display: flex; width: 100%; margin-bottom: 10rpx; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 44rpx; height: 44rpx;" src="/static/icon/edit.png" mode=""></image>
						<view class="text_22 color__ fun-item-title" style="color: #fff; margin-left: 20rpx;">
							设置
						</view>
					</view>
					<image style="width: 38rpx; height: 38rpx;" src="/static/icon/righta.png" mode=""></image>
				</view>
				<view class="" style="height: 2rpx; background-color: #333; width: 100%; margin: 30rpx 0;">
					
				</view> -->
<!-- 				<view class="" style="height: 2rpx; background-color: #333; width: 100%; margin: 20rpx 0;">
					
				</view> -->
				
<!-- 				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-real/index')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_shimirenzhen.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title" style="color: #fff;">
						实名认证
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-vip/index')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_huiyuanzhongxin.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title" style="color: #fff;">
						会员中心
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-visitor/index')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_look_me.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title" style="color: #fff;">
						谁看过我
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-login/agreement')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_xieyi.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title" style="color: #fff;">
						协议
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="kefu">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_kefu.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title" style="color: #fff;">
						在线客服
					</view>
				</view>
				<view class="flex_c_c fun-item" 
					@tap="handleRouter('/pages/m-pages/m-settle/index')">
					<view class="fun-item-img">
						<image class="img" src="./img/ic_mine_set.png" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title" style="color: #fff;">
						设置
					</view>
				</view> -->
			<!-- 	<view class="flex_c_c fun-item" v-for="(item,index) in funList2" :key="index"
					@tap="handleRouter(item.path)">
					<view class="fun-item-img">
						<image class="img" :src="item.icon" mode="aspectFill"></image>
					</view>
					<view class="text_22 color__ fun-item-title">
						{{item.name}}
					</view>
				</view> -->
			</view>
		</view>




		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-bc">
					<image class="img" src="./img/ic_sign_bg.png" mode="aspectFill"></image>
				</view>
				<view class="flex_r fa_c z_index2 popup-remind">
					<view class="text_24">
						签到提醒
					</view>
					<view class="flex_r remind" @click="onRemind">
						<view class="remind-str" :class="{flex1:isRemind}"></view>
						<view class="remind-item"></view>
					</view>
				</view>

				<view class="flex_c z_index2 fj_c title">
					<view class="text_36">
						已连续签到0天
					</view>
					<view class="text_24">
						连续签到7日大礼
					</view>
				</view>

				<view class="z_index2 list">
					<view class="flex_c_c list-item"
						:class="[`fingerboard-item-${index}`,index == 0 ? 'label_item' : '']"
						v-for="(item,index) in 7">
						<view class="list-item-img">
							<image class="img" src="./img/task_zuanshi.png" mode="aspectFill"></image>
						</view>
						<view class="text_28 label_item_text">
							钻石+{{index}}
						</view>
					</view>
				</view>

				<view class="z_index2 button size_white size_white">
					签到
				</view>

			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				isRemind: false,
				info: {},
				funList1: [
				// {
				// 	name: '任务中午',
				// 	icon: require('./img/ic_mine_kefu.png')
				// },
				{
					name: '我的钱包',
					icon: require('./img/ic_mine_wallet.png')
				}
				// ,{
				// 	name: '装扮商城',
				// 	icon: require('./img/ic_mine_shop.png')
				// },
				],
				funList2: [
					// {
					// 	name: '实名认证',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_shimirenzhen.png')
					// },
					// {
					// 	name: '会员中心',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_huiyuanzhongxin.png')
					// },'
					// {
					// 	name: '谁看过我',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_look_me.png')
					// },
					// {
					// 	name: '协议',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_xieyi.png')
					// },
					// {
					// 	name: '在线客服',
					// 	path: '/im/home/install/install',
					// 	icon: require('./img/ic_mine_kefu.png')
					// },
					{
						name: '设置',
						path: '/im/personal/personal',
						icon: require('./img/ic_mine_set.png')
					}
				]
			}
		},
		onLoad() {},
		onShow() {
			uni.setTabBarStyle({
				selectedColor: '#fff',
				backgroundColor: '#0C0807',
				// backgroundImage: 'linear-gradient(to top, #aaa, #66ff00)'
			})
			this.getInfo()
		},
		methods: {
			to,
			onRemind() {
				this.isRemind = !this.isRemind
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			kefu(){
				uni.showModal({
					title:'客服',
					content: `客服QQ：2778027813 工作时间9：00-18：00`
				})
			},
			handleRouter(path) {
				// uni.showToast({
				// 	title: '跳转',
				// 	icon: 'none',
				// });
				uni.navigateTo({
					url: path,
				});
			},
			async getInfo() {
				let res = await this.$c.post('/app/usermessage/getMessage')
				if (res.code != 0) {
					uni.navigateTo({
						url: '/im/login/login'
					});
				}
				this.info = res.data
			},
		}
	}
</script>
<style lang="scss" scoped>
	.popup {
		position: relative;
		box-sizing: border-box;
		padding: 20rpx;
		width: 640rpx;
		border-radius: 26rpx;
		overflow: hidden;
		background-image: linear-gradient(to top, #fff, #f4fff1);
		.popup-bc {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		.popup-remind {
			height: 100rpx;
			margin-left: 20rpx;

			.remind {
				margin-left: 20rpx;
				width: 110rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background-color: #dcdcdc;

				.remind-str {
					transition: all 0.3s;
				}

				.remind-item {
					position: relative;
					top: -10rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #efefef;
				}
			}
		}

		.title {
			height: 120rpx;
			margin-left: 20rpx;
		}

		.list {
			width: calc(100% - 40rpx);
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 200rpx 200rpx;
			grid-gap: 8px;

			.list-item {
				border-radius: 20rpx;
				background-image: linear-gradient(to left, #f5f5ff, #f5f5ff);

				.list-item-img {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;
				}
			}

			.label_item {
				background-image: linear-gradient(to left, #c787ff, #fdaeff, #fdaeff);
				
				.label_item_text {
					color: #fff
				}
			}

			.fingerboard-item-6 {
				grid-column: 3 / 5;
			}
		}

		.button {
			width: 100%;
			height: 80rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 80rpx;
			margin-top: 30rpx;
			background-color: #191923;
		}

	}

	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
		// background: linear-gradient(#4C4E51, #30333A, #4C4E51, #090B14);
		background-image: url('../../../statics/images/beijing1.png');
		background-size: 100% 100%;
	}

	.top {
		width: calc(100% - 60rpx);
		height: 180rpx;
		margin: 0 auto;

		.top-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;
		}

		.top-infr {
			.top-infr-name {}

			.top-infr-icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-left: 20rpx;
			}
		}
	}


	.member {
		position: relative;
		box-sizing: border-box;
		padding: 10rpx;
		width: calc(100% - 60rpx);
		height: 100rpx;
		border-radius: 20rpx;
		margin: 0 auto 30rpx auto;
		background-color: #333;
		overflow: hidden;

		.member-bc {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
		}

		.member-img {
			width: 44rpx;
			height: 44rpx;
			margin-right: 20rpx;
			margin-left: 10rpx;
		}

		.member-icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: 10rpx;
		}
	}


	.fun {
		box-sizing: border-box;
		padding: 20rpx;
		width: calc(100% - 60rpx);
		margin: 0 auto 30rpx auto;
		border-radius: 20rpx;
		// background-color: #fff;
		// background: linear-gradient(to left, #35383D, #23262D, #303338);

		.fun-title {
			width: 100%;
			height: 50rpx;
		}

		.fun-box {
			box-sizing: border-box;
			width: 100%;
			padding: 0rpx 10rpx;
			flex-wrap: wrap;

			.fun-item {
				width: 25%;
				box-sizing: border-box;
				padding: 20rpx 0;

				.fun-item-img {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 10rpx;
				}

				.fun-item-title {}
			}

		}

	}
</style>